<style scoped lang="less">
.overflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<template>
  <div>
    <div style="margin-bottom: 10px;display: flex;">
      <span @click="() => { triggercurrentweek('上') }">上</span>
      <span style="padding:0 10px;" @click="() => { triggercurrentweek() }">当</span>
      <span @click="() => { triggercurrentweek('下') }" style="padding-right: 10px;;">下</span>
      <span @click="() => {
        queryParams.plan_endtime_start = ''
        queryParams.plan_endtime_end =''
        queryParams.pageNum=1;
getInfoList();

}" style="padding-right: 10px;;">clear</span>
      <weekdatepicker
          placeholder="预计结束时间 过滤" :props_targetTimeStart="queryParams.plan_endtime_start"
          :props_targetTimeEnd="queryParams.plan_endtime_end" @change="_range => {
        queryParams.plan_endtime_start = _range?.startTime
        queryParams.plan_endtime_end = _range?.endTime
        queryParams.pageNum = 1;
        getInfoList()
      }"
          :clearable="true"></weekdatepicker>

      <!-- state -->
      <dic-select code="task_state"
                  :clearable="true"
                  v-model="queryParams.state" style="width: 120px;margin-left:10px;"
                  @change2="(_dic)=>{
  queryParams.state = _dic?.value;
  queryParams.pageNum = 1;
        getInfoList()

}"
      ></dic-select>

      <div>
        <div style="margin-left: 10px;">
          <el-input  type="input" v-model="queryParams.searchkey" placeholder="关键字" clearable/>
        </div>

      </div>
      <div style="margin-left: 10px">
        <el-button type="primary" @click="()=>{
       queryParams.pageNum=1;
       getInfoList()
      }">search
        </el-button>
      </div>

    </div>

    <div>
      <el-button size="mini" @click="() => triggerModify()">新增</el-button>
      <el-button size="mini" @click="() => triggerWeek()">周视图</el-button>
    </div>
    <el-table :data="dataList" size="mini" :loading="loading">

      <el-table-column label="id" prop="id">
        <template #default="scope">
          <div>
            {{ scope.row['id'] }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="taskname" prop="taskname">
        <template #default="scope">
          <div>
            {{ scope.row['taskname'] }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="taskcontent" prop="taskcontent">
        <template #default="scope">
          <div class="overflow2 " style="cursor: pointer;" @click="() => triggerModify(scope.row)">
            {{ scope.row['taskcontent'] }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" prop="状态">
        <template #default="scope">
          <div>
            <dic-tag code="task_state" :value="scope.row['state']"></dic-tag>
          </div>
        </template>
      </el-table-column>


      <el-table-column label="要求完成时间" prop="plan_endtime">
        <template #default="scope">
          <div>
            {{ scope.row['plan_endtime'] }}
            <div v-if="scope.row['plan_endtime']">
              <span>还剩下{{ resttime(scope.row['plan_endtime']) }}天</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="预计任务消耗时间" prop="plan_endtime">
        <template #default="scope">
          <div>
            <span>{{ (scope.row['plan_work_time']) }}天</span>
          </div>
        </template>
      </el-table-column>


      <el-table-column label="实际开始时间" prop="real_starttime">
        <template #default="scope">
          <div>
            {{ scope.row['real_starttime'] }}
          </div>
        </template>
      </el-table-column>


      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <div>
            <el-button type="text" @click="() => triggerModify(scope.row)">编辑
            </el-button>

            <el-button type="text" @click="() => triggerdeleteone(scope.row)">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :background="true" style="padding-top: 20px" background :page-size="queryParams.pageSize"
                   layout="sizes,prev, pager, next" :total="total" @size-change="(pageSize) => {
        queryParams.pageSize = pageSize;
        dataList = [];
        getInfoList();
      }
        " @current-change="(pageNum) => {
        queryParams.pageNum = pageNum;
        dataList = [];
        getInfoList();
      }
        "></el-pagination>
  </div>
</template>
<script setup>
import FormDialog from '../../components/FormDialog';
import { alertConfirm, alertWithPaylod } from '@/utils/alertUtils';
import axios from 'axios';
import { ref, onMounted } from 'vue';
import moment from 'moment';
import weekdatepicker from '@/components/erp-date-picker/weekdatepicker.vue';


const dataList = ref([]);
const total = ref(0);
const queryParams = ref({
  searchkey: '',
  plan_endtime_start: '',
  plan_endtime_end: '',
  pageNum: 1, pageSize: 10,
});
const loading = ref(false);

function resttime(timestr) {
  const today = moment();
  const future = moment(timestr);
  const diff = future.diff(today, 'days');

  return diff;
}

async function getInfoList() {
  loading.value = true;
  var result = await axios
      .post('/api/tb_task/apis', {
        _name: 'getlist',
        module: '',
        ...queryParams.value,
      })
      .then((res) => res.data);
  total.value = result?.count || result?.total;
  dataList.value = result?.data || [];
  loading.value = false;


}

import { useRoute, useRouter } from 'vue-router';
import { dateFormatYYYYMMDDHHmmss } from '@/utils/index.js';

const router = useRouter();

async function triggerWeek() {
  router.push('/taskweek');
}

async function triggerModify(row) {
  var result = await FormDialog({
    closeOnClickModal: false,
    title: '管理',
    width: '1200px',
    data() {
      return { ...row };
    },
    components: {
      modify: () => import('./modify.vue'),
      footer: () => import('./footer.vue'),
    },
  });
  console.log('result :', result);
  if (result?.success) {
    getInfoList();
  }
}

async function triggerdeleteone(row) {
  await alertConfirm('确定删除吗？');
  var result = await axios
      .post('/api/tb_task/apis', {
        _name: '删除',
        module: '',
        ...row,
      })
      .then((res) => res.data);
  alertWithPaylod(result);
  if (result?.success) {
    getInfoList();
  }
}

function triggercurrentweek(action) {
  if (action == '上') {
    var current = queryParams.value.plan_endtime_start || new Date();
    current = moment(current).add(-1, 'week');
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(current).startOf('week'));
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(current).endOf('week'));

  } else if (action == '下') {
    var current = queryParams.value.plan_endtime_start || new Date();
    current = moment(current).add(1, 'week');
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(current).startOf('week'));
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(current).endOf('week'));
  } else {
    //获取默认本周的
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(new Date()).startOf('week'));
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(new Date()).endOf('week'));
  }

  console.log('queryParams.plan_endtime_end :', queryParams.plan_endtime_end);

  getInfoList();

}

onMounted(() => {
  //获取默认本周的
  queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(new Date()).startOf('week'));
  queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(new Date()).endOf('week'));
  console.log('queryParams.plan_endtime_end :', queryParams.plan_endtime_end);

  getInfoList();
});
</script>
